const vm = new Vue({
        el: "#home",
        data: {
            start: 1,    // 查询页数
            end: 1,
            article: {
                user_id: "",
                title: "",   // 文章标题
                content: "", //  文章内容
                tag_list: [],    // 文章分类列表
                zhaiyao: "", //文章摘要
            },
            // 发布评论
            content: {
                uid: sessionStorage.getItem("user_id"), // 用户id
                aid: "", // 文章id
                comment: "", // 评论内容
            },
            // 发布回复
            reply: {
                uid: sessionStorage.getItem("user_id"), // 用户id
                cid: "",    // 评论id
                comment: "", // 回复内容
            },
            drawer: false,  // 评论区状态
            drawer2: false,  //回复区状态
            articles: [{"content": "<h1>你好</h1><h1>你好</h1><h1>你好</h1>"}],   // 文章列表
            menu: false,
            friends_1: false,  // 打开好友框
            friends_2: false,  // 内置框
            f_type: 0,   // 功能
            fDialog: false,
            tags: ['旅游', '音乐', '编程', '美食', "情感", "体育", "摸鱼", "健康", "摄影", "校园", "娱乐", "其它"],
            tagCount: [],
            choose: {name: "", value: ""},
            light: -1, // 选中的下标
            n: 1,    // 查询的类别
            key: "",     // 关键字查询
            timer: null, // 菜单计时器
            timer2: {},    // 点赞计时器
            friends_id: "",  // 申请好友id
            friends: [],    // 查询好友
            refriends: [],   // 好友申请列表
            contents: [],    // 评论列表
            replies: [],  // 回复内容列表
            cnt_rpy: {}, // 楼主
            cstart: 1,   // 评论当前页数
            cend: 1, // 评论页数
            rstart: 1,   // 回复当前页数
            rend: 1, //  回复页数
            activeName: "1", // 手风琴盒子
            flower: false,   // 暂停键
            tp2: 1,   // 滚轮事件
            user: {
                userId: sessionStorage.getItem("user_id"),
                img: sessionStorage.getItem("img"),
                nickname: sessionStorage.getItem("nickName")
            },


        },
        created() {
            this.getArticle()
            this.getCount_tags();
            this.isStatu();
        },
        mounted() {
            this.$refs.main.addEventListener("scroll", this.bottom_leng);
        },
        beforeUnmount() {
            this.$refs.main.removeEventListener("scroll", this.bottom_leng);

        },
        methods: {
            // 验证在线
            isStatu() {
                setInterval(
                    () => {
                        axios({
                            url:"/user/statu",
                            method:"get",
                            params:{
                                "uid":this.user.userId
                            }
                        })
                    }, 1000 * 60)   // 1分钟发送一次请求
            },
            // 跳转分类2
            getF2(index) {
                this.n = 2;
                console.log(3);
                this.start = 1; // 第一页
                this.choose.value = (index + 1);
                this.getArticle();
            },
            // 分类数量
            getCount_tags() {
                axios({
                    url: "/article/flcount",
                    method: "get"
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            this.tagCount = resp.data.datas;
                        }
                    }
                )
            },
            // 点赞状态
            change_love(aid, index, n) {
                clearTimeout(this.timer2[aid]);    //  清除上次该文章的计时器
                const uid = this.user.userId
                // 如果没有登录则不能点赞
                if (uid === null) {
                    this.$message.warning("未登录，请登录后执行!")
                    return;
                }
                let url = "/love/add";      // 默认点赞
                if (n === 1) {
                    url = "/love/unadd";    // 取消点赞
                    this.articles[index].islove = false;
                    this.articles[index].loveNum--;
                    this.$message.success("已取消")
                } else {
                    this.articles[index].islove = true;
                    this.articles[index].loveNum++;
                    this.$message.success("点赞成功")
                }
                this.timer2[aid] = setTimeout(
                    () => {
                        axios({
                            url: url,
                            method: "get",
                            params: {
                                "uid": uid,
                                "aid": aid,
                            }
                        })
                    }, 1000 * 10)    // 十秒后计时

            },
            // 显示评论
            get_content() {
                const aid = this.content.aid    // 文章id
                const url = "/content/find";
                axios({
                    url: url,
                    method: "get",
                    params: {
                        "index": this.cstart,
                        "aid": aid
                    }
                }).then(
                    (resp) => {
                        // 返回成功
                        if (resp.data.statu) {
                            // 如果是第1页
                            if (this.cstart === 1) {
                                this.cend = resp.data.pageNum;  // 评论页数
                                this.contents = resp.data.datas
                                this.tp2 = 1;
                                this.$refs.pinlun.addEventListener("scroll", this.btl2)
                            } else {
                                this.contents = this.contents.concat(resp.data.datas)
                            }
                        }
                    }
                )
            },
            // 显示回复
            get_reply() {
                const cid = this.reply.cid;
                const url = "/content/find2";
                axios({
                    url: url,
                    method: "get",
                    params: {
                        "index": this.cstart,
                        "cid": cid
                    }
                }).then(
                    (resp) => {
                        // 返回成功
                        if (resp.data.statu) {
                            // 如果是第1页
                            if (this.rstart === 1) {
                                this.rend = resp.data.pageNum;  // 评论页数
                                this.replies = resp.data.datas
                                this.$refs.huifu.addEventListener("scroll", this.btl2)
                            } else {
                                this.replies = this.replies.concat(resp.data.datas)
                            }
                        }
                    }
                )
            },
            // 显示时间
            showTime(time) {
                if (time) {
                    const t = time.split(",")
                    return t[0] + "年" + t[1] + "月" + t[2] + "日" + " " + t[3] + ":" + t[4];
                }
                return "";
            },
            // 添加回复
            add_reply() {
                const formData = new FormData();
                if (this.reply.comment === "") {
                    this.$message.warning("回复内容为空，回复失败!");
                    return;
                }
                for (let key in this.reply) {
                    formData.set(key + "", this.reply[key])
                }
                axios({
                    url: "/content/add2",
                    method: "post",
                    data: formData
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            this.$message.success("回复成功!")
                            this.reply.comment = "";  // 清空发表框
                            this.rstart = 1;
                            this.get_reply();
                        } else {
                            this.$message.error("后台故障，请联系工作人员!")
                        }
                    }
                )

            },
            // 添加评论
            add_content() {
                const formData = new FormData();
                if (this.content.comment === "") {
                    this.$message.warning("输入内容为空，发表失败!");
                    return;
                }
                for (let key in this.content) {
                    formData.set(key + "", this.content[key])
                }
                axios({
                    url: "/content/add",
                    method: "post",
                    data: formData
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            this.$message.success("发表成功!")
                            this.content.comment = "";  // 清空发表框
                            this.cstart = 1;
                            this.get_content();
                        } else {
                            this.$message.error("后台故障，请联系工作人员!")
                        }
                    }
                )
            },
            // 处理好友请求
            dofriend(id, t, index) {
                axios({
                    url: "/friends/readd/" + id + "/" + t
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            this.$message.success(resp.data.type)
                        }
                    }
                )
                this.refriends.splice(index, 1)
            },
            // 查看申请好友的列表
            getfList() {
                this.friends_2 = true;
                this.f_type = 2;
                const mid = this.user.userId;
                axios({
                    url: "/friends/getfList/" + mid,
                    method: "get"
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            this.refriends = resp.data.datas
                        }
                    }
                )
            },
            // 查询鱼号关系
            find_fid() {
                const that = this;
                const mid = this.user.userId;
                const url = "/friends/realtive/" + mid + "/" + this.friends_id
                axios({
                    url: url,
                    method: "get",
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            const datas = resp.data.datas;
                            this.friends = [{
                                "id": that.friends_id,
                                "img": datas.img,
                                "nickname": datas.nickname,
                                "statu": true,
                            }]
                            console.log(this.friends);
                            this.friends_id = ""
                        } else {
                            if (resp.data.reason === "用户不存在") {
                                this.$message.error("用户不存在");
                            } else {
                                const datas = resp.data.datas;
                                this.friends = [{
                                    "id": that.friends_id,
                                    "img": datas.img,
                                    "nickname": datas.nickname,
                                    "statu": false,
                                    "reason": resp.data.reason
                                }]
                                this.friends_id = ""
                            }
                        }
                    }
                )

            },
            // 添加好友
            add_friend() {
                const that = this;
                const formData = new FormData();
                formData.set("requester", this.user.userId);  // 请求者id
                formData.set("recipient", that.friends[0]['id']);  // 接收者id

                axios({
                    url: "/friends/add",
                    method: "post",
                    data: formData
                }).then(
                    (resp) => {
                        console.log(resp.data);
                        if (resp.data.statu) {
                            this.$message.success("申请成功!")
                            this.friends_2 = false;
                        }
                        else{
                            this.$message.error("添加失败!")
                        }
                    }
                )
            },
            // 查看菜单
            showmenu() {
                clearTimeout(this.timer);
                this.menu = true;
                this.timer = setTimeout(
                    () => {
                        this.menu = false;
                    }, 5000)
            },
            // 关键字查询
            findbyKey() {
                this.start = 1; // 重新从第一页查
                this.n = 5; // 关键字查询
                this.getArticle()
                this.key = "";
            },
            // 选择分类
            change_choose(index) {
                this.choose.name = this.tags[index];
                this.light = index
                this.choose.value = index + 1 + ""
            },
            btl2(event) {
                const div = event.target;
                const leng = div.scrollHeight - div.scrollTop - div.clientHeight;
                // 如果小于346px,则给进度加一,然后发送请求
                if (this.tp2 === 1) {
                    if (this.cstart < this.cend) {
                        if (this.tp2 === 1) {
                            this.cstart++;
                            this.get_content()   // 获取评论

                        }
                    } else if (this.cstart === this.cend) {
                        if (leng <= 1) {
                            this.cstart++;   //只显示一次
                            this.$message.success("已经到底了哦")
                        }
                    }
                } else {
                    if (this.rstart < this.rend) {
                        if (leng < 346 && leng > 1) {
                            this.rstart++;
                            this.get_reply();   // 获取回复
                        }
                    } else if (this.rstart === this.rend) {
                        this.rstart++;
                        this.$message.success("已经到底了哦")
                    }
                }
            },
            // 计算滚动条距离底部距离
            bottom_leng() {
                const div = this.$refs.main;
                const leng = div.scrollHeight - div.scrollTop - div.clientHeight;
                // 如果小于346px,则给进度加一,然后发送请求
                if (this.start < this.end) {
                    if (leng < 346 && leng > 0) {
                        this.start++;
                        this.getArticle()   // 获取数据
                    }
                } else if (this.start === this.end) {
                    if (leng <= 0) {
                        this.start++;   //只显示一次
                        this.$message.success("已经到底了哦")
                    }
                }
            },
            get_fenlei() {
                if (this.choose.name === "") {
                    this.$message.error("请选择一个分类!!")
                } else {
                    this.n = 2;
                    this.getArticle()   // 获取文章
                    this.fDialog = false;   // 关闭窗口
                }
            },
            // 退出
            exit_() {
                const uid = this.user.userId;
                if (uid) {
                    sessionStorage.removeItem("user_id");   //删除session
                }
                window.location.href = "/";
                axios({
                    url: "/user/exit",
                    method: "get",
                    params: {
                        "uid": uid
                    }
                })
            },
            to_my() {
                const user_id = this.user.userId;
                if (user_id) {
                    window.open("/user/userhome/" + user_id);
                } else {
                    this.$message.warning("用户未登录!!")
                }
            },
            to_about() {
                window.open("/user/about");
            },
            //主页
            to_home() {
                this.n = 1;
                this.start = 1;
                window.location.location = "/home_index";
                this.getArticle()
            },

            //发布
            to_fabu() {
                if (this.user.userId === null) {
                    this.$message.warning("未登录，请登录后操作!")
                    return;
                }
                sessionStorage.removeItem("art_title"); // 相当于删除了修改文章的初始化
                window.open("/article/article_index");
            },
            // 详情
            to_xq(item) {
                sessionStorage.setItem("xq_art", JSON.stringify(item)); // 存入序列化内容
                window.open("/article/xq")
            },
            // 关闭评论区
            closeContent() {
                const div = this.$refs.pinlun;
                div.removeEventListener("scroll", this.btl2)   // 删除监听器
                this.drawer = false;
            },
            // 关闭回复区
            closeReply() {
                const div = this.$refs.huifu;
                div.removeEventListener("scroll", this.btl2)   // 删除监听器
                this.drawer2 = false;
                this.tp2 = 1;   // 滚轮事件变为评论事件
            },
            // 打开回复区
            openReply(cid, content) {
                this.reply.cid = cid;
                this.tp2 = 2;   // 滚轮事件变为回复
                this.drawer2 = true;
                this.cnt_rpy = content; // 楼主评论
                this.rstart = 1;    // 第一页
                this.get_reply();   // 获取回复
            },
            // 打开评论区
            openContent(aid) {
                const uid = this.user.userId;
                if (uid === null) {
                    this.$message.warning("未登录，请登陆后操作")
                    return;
                }
                this.drawer = true; // 先打开评论区
                this.content.aid = aid; // 文章id
                this.cstart = 1;  //第一页
                this.tp2 = 1;   // 滚轮事件类型
                this.get_content(); // 获取评论
            },
            // 获取文章
            getArticle() {
                let url = "";
                const that = this;
                const uid = this.user.userId;  // 用户id
                let params = {}
                // 默认查
                if (this.n === 1) {
                    url = "/article/find"
                    params = {
                        "index": that.start,
                        "uid": uid
                    }
                }
                // 分类查
                else if (this.n === 2) {
                    url = "/article/fenlei";
                    params = {
                        "index": this.start,
                        "tid": this.choose.value,
                        "uid": uid
                    }
                }
                // 热搜查
                else if (this.n === 3) {
                    url = "/article/resou";
                    params = {
                        "index": this.start,
                        "uid": uid
                    }
                }
                // 关键字查
                else if (this.n === 5) {
                    url = "/article/key";
                    params = {
                        "index": this.start,
                        "key": this.key,
                        "uid": uid
                    }
                }
                axios({
                    url: url,
                    method: "get",
                    params: params
                }).then(
                    (resp) => {
                        if (resp.data.statu) {
                            that.end = resp.data.pageNum
                            // 如果是第一页
                            if (that.start === 1) {
                                that.articles = resp.data.articles
                                // 如果不是默认查询就提示成功
                                if (this.n !== 1) {
                                    that.$notify({
                                        type: "success",
                                        message: "成功!",
                                        duration: 1000
                                    })
                                }
                            }
                            // 如果是之后的就添加
                            else {
                                that.articles = that.articles.concat(resp.data.articles)
                            }
                        }
                    }
                )
            },
            // 热搜查询
            get_resou() {
                this.start = 1;
                this.n = 3;
                this.getArticle()   // 获取文章
            },
        }
    }
)